@remove-bg: #ff9900;
@add-bg: rgb(7, 153, 238);
.atts {
    // --bg: #ff9900;
    padding: 12px;
    font-size: 12px;
    .rows {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 4px 0;
        .lab {
            color: #aaa;
            margin-right: 10px;
            max-width: 120px;
        }
        .val {
            color: #666;
            flex: 1;
            width: 0;
        }
        .rows {
            margin-top: 0;
        }
    }
}

.add{
    user-select: none;
    padding: 10px;
    background: @add-bg;
    cursor: default;
    color: #fff;
    transition: all 300ms;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    &:hover{
        background: lighten(@add-bg, 10%);
    }
    &:active{
        background: darken(@add-bg, 10%);
    }
}

.remove{
    background: @remove-bg;
    &:hover{
        background: lighten(@remove-bg, 10%);
    }
    &:active{
        background: darken(@remove-bg, 10%);
    }
}
